

/**
 * 返回顶部
*/
(function(){
    var oBodySidebar = document.querySelector('.body-sidebar'),
        oReturnTop = oBodySidebar.querySelector('.return-top');

    var height = window.innerHeight; 

        window.onscroll = function(){
            var oBodyTop  = document.documentElement.scrollTop;
            if(oBodyTop > height){

                oReturnTop.classList.add('return-top-shop');
            }else{

                oReturnTop.classList.remove('return-top-shop');
            }
        }
})();



/**
 * 头部二级导航栏
*/
// 匿名函数, 防止变量污染
(function(){
    // 获取元素
    var oNavBottom = document.querySelector('.nav-bottom'),
        oNavListA = oNavBottom.querySelector('.nav-list-a'),
        aNavA = oNavListA.querySelectorAll('a');

        oNavSubnav = oNavBottom.querySelector('.nav-subnav'),
        navSubnavCon = oNavSubnav.querySelector('.nav-subnav-con');

    /* 数据 */
    // 导航栏分类
    var AnavName = navSubnavConFn().AnavNames;
    // 导航栏产品图片
    var AnavImg = navSubnavConFn().imgs;
    // 商品名字
    var AnavSubName = navSubnavConFn().names;
    // 商品价格
    var AnavPrice = navSubnavConFn().price;
    


    // 防止动画还没结出继续执行动画
    var flag = true;
    // 鼠标停留开关
    var addTime,removeTime;

    /**
     *鼠标移入函数
     */
    function subnavAdd(e){
        clearTimeout(removeTime);
        if(!flag) return; 
        var target = e.target;
        var time = subnavTime();

        // 防止快速移动导航栏 a 标签时列表不能隐藏
        var classStr = oNavSubnav.getAttribute('class');
        var classIndex = classStr.indexOf(' ');
        var classStrName = classStr.substring(classIndex);
        if(classStr.indexOf('nav-subnav-height') != -1){
            flag = false;
            clearTimeout(addTime);
        } 

        // 过滤掉 服务,社区
        if(target.innerHTML == AnavName[7] || target.innerHTML == AnavName[8]) return subnavRemove(e);

        // 更新二级导航栏数据
        navSubnavConupdate(target);
        
        // 滑出二级导航栏
        addTime = setTimeout(function(){
            if(target.tagName == 'A'){
                oNavSubnav.classList.add('nav-subnav-height');
            }
            flag = false;
            setTimeout(function(){ flag = false; }, time);
        }, 200);
    }



    /**
     *鼠标移出函数
     */
    function subnavRemove(e){
        clearTimeout(addTime);
        if(flag) return;
        flag = true;
        var target = e.target;
        var time = subnavTime();
        removeTime = setTimeout(function(){
            // 鼠标移出头部导航栏 a标签时生效
            if(target.tagName == 'A'){
                oNavSubnav.classList.remove('nav-subnav-height');

            }
            // 防止鼠标移出oNavSubnav 不能生效
            else if(target.tagName = 'DIV'){ 
                oNavSubnav.classList.remove('nav-subnav-height');
            }
            setTimeout(function(){ flag = true; }, time);
        }, 50);
    }



    /**
     * 获取二级导航栏过度时间
     */
    function subnavTime(){
        /* 获取过度时间 */
        var time = window.getComputedStyle(oNavSubnav, null).transitionDuration;
        var timeIndex = time.indexOf('s');
        var strTime = time.substring(0, timeIndex);
        oTime = strTime * 1000;
        return parseInt(oTime);
    }



    /*
     * 更新二级导航栏数据 函数
    */ 
    function navSubnavConupdate(target){
        // 创建文档碎片容器对象
        var navSubnavConInnerHTML = document.createDocumentFragment();
        // 移入不同导航栏标签, 更新数据
        for(var i=0, len=AnavName.length; i<len; i++){
            if(target.innerHTML == AnavName[i]){
                for(var j=0, leng=AnavImg[i].length; j<leng; j++){
                    var oLi = document.createElement('li');
                    oLi.innerHTML = `
                                <a href="#">
                                    <div class="nav-subnav-img">
                                        <img src=${AnavImg[i][j]} />
                                    </div>
                                    <span>${AnavSubName[i][j]}</span>
                                    <span>${AnavPrice[i][j]}</span>
                                </a>
                                `;
                    navSubnavConInnerHTML.appendChild(oLi);
                }  
            }
        }
        navSubnavCon.innerHTML = '';
        navSubnavCon.appendChild(navSubnavConInnerHTML);
    }



    /**
     * 鼠标移入/移出二级导航栏
     */ 
    function oNavsubnavOver(){
        clearTimeout(removeTime);
    }
    function oNavSubnavOut(e){
        flag = false;
        subnavRemove(e);
    }

    oNavListA.addEventListener('mouseover', subnavAdd);
    oNavListA.addEventListener('mouseout', subnavRemove);
    oNavSubnav.addEventListener('mouseenter', oNavsubnavOver);
    oNavSubnav.addEventListener('mouseleave', oNavSubnavOut);




})();




/**
 * 轮播上面的侧边二级导航栏
*/
(function(){

    // 获取元素
    var oNavBottom = document.querySelector('.nav-bottom'),
    oSidebarSubList = oNavBottom.querySelector('.sidebar-sub-list'),

    oSidebar = oNavBottom.querySelector('.sidebar'),
    oSidebarList = oSidebar.querySelector('.sidebar-list'),
    oSidebarListLis = oSidebarList.querySelectorAll('li');


    var aSidebarSubListImgs = sidebarListFn().imgs;

    var aSidebarSubListNames = sidebarListFn().names;

    /*
     * 鼠标移入/移出轮播上面的侧边导航栏
    */ 
    for(var i=0, len=oSidebarListLis.length; i<len; i++){
        (function(i){
            oSidebarListLis[i].onmouseenter = function(){
                oSidebarSubList.classList.remove('sidebar-sub-list-hidden');
                oSidebarSubListColsUpdate(i);
            }
            oSidebarListLis[i].onmouseleave = function(){
                oSidebarSubList.classList.add('sidebar-sub-list-hidden');
            }
            
        })(i)
    }


    
    function oSidebarSubListColsUpdate(index){
        // li的个数
        var col = 6;
        // 获取商品的数量
        var dataNum = aSidebarSubListImgs[index].length;
        // ul的个数
        var colNum = Math.ceil(dataNum / col);
        // 获取最后一个ul的li的个数 (最后一个ul的li的个数可能小于6)
        var remainder = dataNum % col;
        // 商品图片下标( 获取到所有的商品图片 )
        var ImgsIndex = 0;

        // 创建文档碎片
        var oUlFragment = document.createDocumentFragment();
        for(var i=0; i<colNum; i++){
            var oUl = document.createElement('ul');
            oUl.classList.add('sidebar-sub-list-col');
            // 判断最后一个ul 是否满6个商品
            if(remainder != 0 && i == colNum-1){
                col = remainder;
            }
            
            // 创建商品 
            for(var j=0; j<col; j++){
                
                var oLi = document.createElement('li');
                oLi.innerHTML = `
                            <a href="#">
                                <img src="${aSidebarSubListImgs[index][ImgsIndex]}" />
                                <span>${aSidebarSubListNames[index][ImgsIndex]}</span>
                            </a>
                            `;
                ImgsIndex ++;
                oUl.appendChild(oLi);
            }
            oUlFragment.appendChild(oUl);
        }
        // 渲染页面
        oSidebarSubList.innerHTML = '';
        oSidebarSubList.appendChild(oUlFragment);

        /**
         * 鼠标移入/移出轮播上面的侧边二级导航栏
        */
        var oSidebarSubListCols = oSidebarSubList.querySelectorAll('ul');
        for(var j=0, leng=oSidebarSubListCols.length; j<leng; j++){
            (function(j){
                oSidebarSubListCols[j].onmouseenter = function(){
                    oSidebarSubList.classList.remove('sidebar-sub-list-hidden');
                }
                oSidebarSubListCols[j].onmouseleave = function(){
                    oSidebarSubList.classList.add('sidebar-sub-list-hidden');
                }
            })(j)
        }
    }
 

})();




/**
 * banner轮播
*/
(function(){

    var oBanner = document.querySelector('.banner'),
        oBannerImg = oBanner.querySelector('.banner-imgs'),
        // 获取所有图片
        
        // 获取左右按钮
        oBannerBtnLeft = oBanner.querySelector('.banner-btn-left'),
        oBannerBtnRight = oBanner.querySelector('.banner-btn-right'),
        // 获取下边小按钮
        oBannerBtnList = oBanner.querySelector('.banner-btn-list'),
        oBannerBtnListUl = oBannerBtnList.querySelector('ul');

    // 轮播图片下标
    var index = 0;

    // 轮播下面小圆圈下标
    var indexList = 0;

    // 防止用户点击过快
    var flag = true;

    // 清除自动轮播
    var clearTime;


       

    // 获取图片
    var imgs = bannerImgFn().banerImg;

    // 动态图片添加(dom)
    function bannerImg(){
        var oDivFargment = document.createDocumentFragment();
        var oDivFargment2 = document.createDocumentFragment();
        for(var i=0; i<imgs.length; i++){
            var oLi = document.createElement('li');
            var oBtnLi = document.createElement('li');
            if(i == 0){
                oLi.classList.add('banner-shop-img');
                oBtnLi.classList.add('banner-btn-list-bg');
            }
            oLi.innerHTML = `
                            <a href="#"><img src="${imgs[i]}"/></a>
                            `;

            oDivFargment.appendChild(oLi);
            oDivFargment2.appendChild(oBtnLi);
        }
        oBannerImg.innerHTML = '';
        oBannerBtnListUl.innerHTML = '';
        oBannerImg.appendChild(oDivFargment);
        oBannerBtnListUl.appendChild(oDivFargment2);
        

    }
    bannerImg();


    
    /**
     * 点击左按钮函数
    */
    function bannerBtnLeftFn(){
        updateBanner(function(){
            index --;
            if(index < 0) index = aImgLi.length - 1;
        });
    }



    /**
     * 点击右按钮函数
    */
    function bannerBtnRightFn(){
        updateBanner(function(){
            index ++;
            index = index % aImgLi.length;
        });
    }



    /**
     * 点击下边小按钮
    */
    var aBannerBtnListLi = oBannerBtnList.querySelectorAll('li');
    for(var i=0, len=aBannerBtnListLi.length; i<len; i++){
        (function(i){
            aBannerBtnListLi[i].onclick = function(){
                updateBanner(function(){
                    index = i;
                })
                    indexList = i;
            }
        })(i)
    }



    /**
     * 获取过渡时间
    */
    function bannerDurationTime(){
        var time = window.getComputedStyle(aImgLi[0], null).transitionDuration;
        var timeIndex = time.indexOf('s');
        var strTime = time.substring(0, timeIndex);
        oTime = strTime * 1000;
        return parseInt(oTime);
    }




    /**
     * 控制用户点击速度
    */
    function userClickTime(){
        var time = bannerDurationTime();
        setTimeout(function(){
            flag = true;
        }, time);
    }



    /**
     * 自动轮播
    */
    function autoplay(){
        clearTime = setInterval(function(){
                bannerBtnRightFn();
        }, 5000);
    }
    
    autoplay();
    oBanner.addEventListener('mouseenter', function(){
        clearInterval(clearTime);
    });
    oBanner.addEventListener('mouseleave', function(){
        autoplay();
    });




    /**
     * 更新函数
    */
   var aImgLi = oBannerImg.querySelectorAll('li');
    function updateBanner(fn){
        if(!flag) return;
        userClickTime();
        aBannerBtnListLi[index].classList.remove('banner-btn-list-bg');
        aImgLi[index].classList.remove('banner-shop-img');
        fn();
        aImgLi[index].classList.add('banner-shop-img');
        aBannerBtnListLi[index].classList.add('banner-btn-list-bg');
        flag = false;
    }

    oBannerBtnLeft.addEventListener('click', bannerBtnLeftFn);
    oBannerBtnRight.addEventListener('click', bannerBtnRightFn);
})();




/**
 * 轮播下面的 small_banner
 */
(function(){
    var oSmallBanner = document.querySelector('.small-banner'),
        oSBImg = oSmallBanner.querySelector('.small-banner-right');

    var imgs = sBannerFn().imgs;
    var oDivFragment = document.createDocumentFragment();
    for(var i=0, len=imgs.length; i<len; i++){
        var oA = document.createElement('a');
        oA.innerHTML = `
                        <img src="${imgs[i]}" />
                       `;
        oDivFragment.appendChild(oA);
    }
    oSBImg.innerHTML = '';
    oSBImg.appendChild(oDivFragment);

})();




/**
 * 小米闪购
*/
(function(){
    var oLimshop = document.querySelector('.limshop'),
        olimshopStartList = oLimshop.querySelector('.limshop-start-list'),

        limshopHeaderBtn = oLimshop.querySelector('.limshop-header-btn'),
        limshopHeaderBtnLeft = limshopHeaderBtn.querySelector('.limshop-header-btn-left'),
        limshopHeaderBtnRight = limshopHeaderBtn.querySelector('.limshop-header-btn-right'),

        limshopStart = oLimshop.querySelector('.limshop-start'),
        limshopGames = limshopStart.querySelector('.limshopStart'),
        limshopTimeState = limshopStart.querySelector('.limshopStart'),
        hour = limshopStart.querySelector('.hour'),
        minute = limshopStart.querySelector('.minute'),
        second = limshopStart.querySelector('.second');

    /**
     * 数据
     */
    // 商品图片
    var goodsImg = limshopFn().imgs;
    // 商品标题
    var goodsTitle = limshopFn().titles;
    // 介绍
    var goodsSpan = limshopFn().spans;
    // 价格
    var discount = limshopFn().prices;



    /**
     * 添加商品函数
    */
    function automaticAdd(){
        // 创建文档碎片
        var goodsFragment = document.createDocumentFragment();
        // 控制li上面top颜色
        var index = 0;
        for(var i=0, len=goodsImg.length; i<len; i++){
            if(index%5 == 0){
                index = 0;
            }
            index ++;
            var oLi = document.createElement('li');
            oLi.classList.add('limshop-top-bg' + index);
            oLi.innerHTML = `
                        <a href="#">
                            <div class="limshop-img-width">
                                <img src="${goodsImg[i]}" />
                            </div>
                            <h3>${goodsTitle[i]}</h3>
                            <span>${goodsSpan[i]}</span>
                            <div class="limshop-start-price">${discount[i].afterDiscout} <span>${discount[i].beforeDiscout}</span></div>
                        </a>
                        `;
            goodsFragment.appendChild(oLi);
        }
        olimshopStartList.innerHTML = '';
        olimshopStartList.appendChild(goodsFragment);
    }
    // 添加商品
    automaticAdd();



    /**
     * 向左点击函数
    */
    function limshopBtnLeft(){
        moveFn(function(liMargin){
    
            if(lateX >= -(978+liMargin)){
                lateX = 0;
                olimshopStartList.style.transform = 'translateX('+ lateX +'px)';
                return;
            }
            lateX += (978+liMargin);
            olimshopStartList.style.transform = 'translateX('+ lateX +'px)';
        });
        // 更换按钮颜色
        limshopBtnBg(false); 
    }
    /**
     * 向右点击函数
    */
    function limshopBtnRight(){

        moveFn(function(liMargin, lateEnd, lateEndStartLate, totalDistance){

            // 获取到最后一个位移
            var lateEndDistance = (lateEnd * 234) + (liMargin * lateEnd);
            // 没商品可移动时 return;
            if(lateX <= -(lateEndDistance + lateEndStartLate)) return;
            // 判断 ul位移距离是否等于最后剩余商品的前一次位移 与 最后一次移动商品数不等于4
            if(lateX == -lateEndStartLate && lateEnd != 0){
                lateX -= lateEndDistance;
                olimshopStartList.style.transform = 'translateX('+ lateX +'px)';
                return;
            }
            lateX -= (978+liMargin);
            olimshopStartList.style.transform = 'translateX('+ lateX +'px)';
        })

        // 更换按钮颜色
        limshopBtnBg(); 
    }

    /**
     * ul移动函数
    */
    var lateX = 0; // ul位移距离
    function moveFn(fn){
        // li边距
        var liMargin = 14;
        // 获取商品数量
        var goodsImgNum = goodsImg.length;
        // 获取商品显示数量
        var liNum = 4;
        // 获取要移动的总次数
        var moveNum = Math.floor(goodsImgNum / liNum);
        // 获取移动最后一次商品数量
        var lateEnd = goodsImgNum % liNum;
        // 获取最后剩余商品的前一次位移
        var lateEndStartLate = (moveNum - 1) * (978+liMargin);
        // 获取到ul总距离
        var totalDistance = (goodsImgNum * 234) + (goodsImgNum * liMargin);

        fn(liMargin, lateEnd, lateEndStartLate, totalDistance);
    }

    // 更换按钮颜色 函数
    function limshopBtnBg(flag){
        // li边距
        var liMargin = 14;
        // 获取商品数量
        var goodsImgNum = goodsImg.length;
        // 结束点距离(所有li宽度 + (所有li边距 减掉 一个li边距) - ul宽度)
        var end = (goodsImgNum * 234) + ((goodsImgNum - 1) * liMargin) - 978;

        if(lateX >= 0){
            limshopHeaderBtnLeft.classList.add('limshop-header-btn-bg');
        }else{
            limshopHeaderBtnLeft.classList.remove('limshop-header-btn-bg');
        }

        if(lateX <= -end){
            limshopHeaderBtnRight.classList.add('limshop-header-btn-bg');
        }else{
            limshopHeaderBtnRight.classList.remove('limshop-header-btn-bg');
        }

        //if(lateX <= ){}
    }
    limshopBtnBg();

    limshopHeaderBtnLeft.addEventListener('click', limshopBtnLeft);
    limshopHeaderBtnRight.addEventListener('click', limshopBtnRight);


    /**
     * 倒计时 (有bug)
    */
   /*
    function countdown(timer){
        // 当前时间
        var nowTime = new Date();

        // 获取时间戳
        var timestamp = timer - nowTime;
        if(timestamp <= 0){
            countdown(tomorrow);
            window.clearTimeout(clTime);
            tomorrow = nowTime + 24 * 60 * 60 * 1000;
            return;
        }
        // 天数
        var date = Math.floor(timestamp / (1000 * 60 * 60 * 24)) < 10 ? 
                    '0' + Math.floor(timestamp / (1000 * 60 * 60 * 24)) : 
                    Math.floor(timestamp / (1000 * 60 * 60 * 24));
        // 小时
        var h = Math.floor(timestamp / (1000 * 60 * 60) % 24) < 10 ?
                '0' + Math.floor(timestamp / (1000 * 60 * 60) % 24) :
                Math.floor(timestamp / (1000 * 60 * 60) % 24);
        // 分钟
        var m = Math.floor(timestamp / (1000 * 60) % 60) < 10 ?
                '0' + Math.floor(timestamp / (1000 * 60) % 60) : 
                Math.floor(timestamp / (1000 * 60) % 60);
        // 秒
        var s = Math.floor(timestamp / 1000 % 60) < 10 ?
                '0' + Math.floor(timestamp / 1000 % 60) : 
                Math.floor(timestamp / 1000 % 60);
        hour.innerHTML = h;
        minute.innerHTML = m;
        second.innerHTML = s;
        clTime = setTimeout(function(){
            countdown(tomorrow);
        }, 1000);
    }
    var clTime;
    var tomorrow = new Date(2019,8,22,00,00,00);
    countdown(tomorrow);
    */
})();

 


/**
 * list-module 
*/
(function(){
    /**
     *  public 
     */
    var oListModule = document.querySelector('.list-module'),
        oShouji = oListModule.querySelector('.shouji'),
        oJiadian = oListModule.querySelector('.jiadian'),
        oZhineng = oListModule.querySelector('.zhineng'),
        oDapei = oListModule.querySelector('.dapei'),
        oPeijian = oListModule.querySelector('.peijian'),
        oZhoubian = oListModule.querySelector('.zhoubian');
 
    /**
     * list-module 构造函数
    */
    function ListModule(option){
        // 获取父元素 
        this.el = option.el || 'body';

        // 左边的banner 图片
        this.oLMbannerImgFlag = option.oLMbannerImgs[0] || null;
        this.oLMbannerImg = option.oLMbannerImgs[1] || null;

        // ul列表 图片
        this.oLMulImgFlag = option.oLMulImg[0] || null;
        this.oLMulImg = option.oLMulImg[1] || [];
        
        // ul列表 name 
        this.oLModulNameFlag = option.oLMulName[0] || null;
        this.oLModulName = option.oLMulName[1] || null;

        // ul列表 配置信息
        this.oLMuleDisposeFlag = option.oLMulDispose[0] || null;
        this.oLMuleDispose = option.oLMulDispose[1] || null;

        //ul列表 价格
        this.oLMulPriceFlag = option.oLMulPrice[0] || null;
        this.oLMulPrice = option.oLMulPrice[1] || null;

        // 下面的banner图
        this.oLMBottomBanner = option.oLMBottomBanner || {};

        // ul列表最后一个li
        this.oLMLastLi = option.oLMLastLi || {};

        // 左边的banner 函数
        this.olmbanner();
        // ul列表函数
        this.olmlist();
        // 下面的banner 函数
        this.olmulBottom();

    }
    
    ListModule.prototype = {
        // 左边的banner 函数
        olmbanner: function(){
            var oListModuleBanner = this.el.querySelector('.list-module-banner');
            var oDivFragment = document.createDocumentFragment();
            if(this.oLMbannerImgFlag == 1){
                var oDiv = document.createElement('div');
                oDiv.classList.add('list-module-banner-img-max');
                oDiv.innerHTML = `
                                    <img src="${this.oLMbannerImg.one}" />
                                `;
                oListModuleBanner.innerHTML = '';    
                oListModuleBanner.appendChild(oDiv);
            }else if(this.oLMbannerImgFlag == 2){
                var oDiv1 = document.createElement('div');
                var oDiv2 = document.createElement('div');
                oDiv1.classList.add('list-module-banner-img-top');
                oDiv2.classList.add('list-module-banner-img-bottom');
                oDiv1.innerHTML = `
                                <img src="${this.oLMbannerImg.one}" />
                                `;
                oDivFragment.appendChild(oDiv1);   
                oDiv2.innerHTML = `
                                <img src="${this.oLMbannerImg.two}" />
                                `;
                oDivFragment.appendChild(oDiv2);  
                oListModuleBanner.innerHTML = '';   
                oListModuleBanner.appendChild(oDivFragment);
            }
        },
        // ul列表函数
        olmlist: function(){
            var listModuleHeadRight = this.el.querySelector('.list-module-head-right');
            var listModuleHeadRightDiv = listModuleHeadRight.children[0];

            if(this.oLMulImgFlag == 1){
                this.oLMulDate();
            }else if(this.oLMulImgFlag == 2){
                // 参数 默认为flase
                this.oLMulDate();
                var page = this;
                // 鼠标移入移出事件 
                var oListModuleHeadA = this.el.querySelector('.list-module-head-a');
                var aListModuleHeadA = oListModuleHeadA.querySelectorAll('a');
        
                aListModuleHeadA[0].addEventListener('mouseenter', function(){
                    // 更新样式
                    this.classList.add('list-module-head-a-opacity');
                    aListModuleHeadA[1].classList.remove('list-module-head-a-opacity');
                    // 更新数据
                    page.oLMulDate();
                });
                aListModuleHeadA[1].addEventListener('mouseenter', function(){
                    // 更新样式
                    this.classList.add('list-module-head-a-opacity');
                    aListModuleHeadA[0].classList.remove('list-module-head-a-opacity');
                    // 更新数据
                    page.oLMulDate(true);
                });
            }
        },
        // ul列表数据处理函数
        oLMulDate: function(numFlag){
            // 存放数据
            var one = {
                img: this.oLMulImg.one,
                h3: this.oLModulName.one,
                dispose: this.oLMuleDispose.one,
                price: this.oLMulPrice.one,

                lastGoods: this.oLMLastLi.one
            };
            var two = {
                img: this.oLMulImg.two,
                h3: this.oLModulName.two,
                dispose: this.oLMuleDispose.two,
                price: this.oLMulPrice.two,

                lastGoods: this.oLMLastLi.two
            };
            // 更换数据开关
            var numFlag = !numFlag ? one : two;

            // 获取节点
            var oListModuleUl = this.el.querySelector('.list-module-ul');
            // 创建文档碎片
            var oDivFargment = document.createDocumentFragment();
            // 编辑数据
            for(var i=0; i<this.oLMulImg.one.length; i++){
                var oLi = document.createElement('li');
                oLi.innerHTML = `
                                <a href="#">
                                    <div class="list-ul-img">
                                        <img src="${numFlag.img[i]}" />
                                    </div>
                                    <h3>${numFlag.h3[i]}</h3>
                                    <span>${numFlag.dispose[i]}</span>
                                    <div class="list-ul-price">${numFlag.price[0][i]} <span>${numFlag.price[1][i]}</span></div>
                                </a>
                                `;
                // 把每一个li添加至oDivFargment(文档碎片对象)中
                oDivFargment.appendChild(oLi);
            }
            // 判断最后一个li是否有商品
            if(Object.keys(this.oLMLastLi).length != 0){
                if(Object.keys(numFlag.lastGoods).length != 0){
                    var oDiv = document.createElement('div');
                    oDiv.className = 'last-li';
                    oDiv.innerHTML = `
                                    <li class="flag">
                                        <a href="#">
                                            <h3>${numFlag.lastGoods.name}</h3>
                                            <!--<span></span>-->
                                            <div class="last-li-price">${numFlag.lastGoods.price} <span></span></div>
                                            <div class="last-li-img">
                                                <img src="${numFlag.lastGoods.img}" />
                                            </div>
                                        </a>
                                    </li>
                                    <li class="gengduo">
                                        <a href="#">
                                            <h2>浏览更多</h2>
                                            <span>热门</span>
                                        </a>
                                    </li>
                                    `;
                    // 把每一个li添加至oDivFargment(文档碎片对象)中
                    oDivFargment.appendChild(oDiv);
                }else{
                    var oDiv = document.createElement('div');
                    oDiv.className = 'last-li';
                    oDiv.innerHTML = `
                                    <li class="gengduo">
                                        <a href="#">
                                            <h2>浏览更多</h2>
                                            <span>热门</span>
                                        </a>
                                    </li>
                                    `;
                    // 把每一个li添加至oDivFargment(文档碎片对象)中
                    oDivFargment.appendChild(oDiv);
                }
            }
            
            // 向dom 更新数据
            oListModuleUl.innerHTML = '';
            oListModuleUl.appendChild(oDivFargment);
        },
        // 下面的banner 函数
        olmulBottom: function(){
            var oLMbottomBanner = this.el.querySelector('.list-module-bottom-banner');
            oLMbottomBanner.innerHTML = '';
            oLMbottomBanner.innerHTML = `<img src="${this.oLMBottomBanner.one}" />`;
        }

    };



    /**
     * 手机
    */
    (function(){
        //var oShouji = oListModule.querySelector('.shouji');

        /* 数据 */
        // 左边的banner  img  图片
        var oListModuleBannerImgs = shoujiFn().leftBannerImgs;
        // ul列表img标签 图片 
        var oListModuleBannerLi = shoujiFn().olImgs;
        // ul列表h3标签 name
        var oListModuleName = shoujiFn().olNames;
        // ul列表span标签 手机配置
        var oListModuleDispose = shoujiFn().olDispose;     
        // ul列表DIV标签   price
        var oListModulePrice = shoujiFn().olPrice;
        // 下边banner img
        var oListModuleBottom = shoujiFn().bottomBannerImg;

        // 调用 构造函数           
        new ListModule({
            el: oShouji,
            oLMbannerImgs: {
                0: Object.keys(oListModuleBannerImgs).length,
                1: oListModuleBannerImgs
            },
            oLMulImg: {
                0: Object.keys(oListModuleBannerLi).length,
                1: oListModuleBannerLi
            },
            oLMulName: {
                0: Object.keys(oListModuleName).length,
                1: oListModuleName
            },
            oLMulDispose: {
                0: Object.keys(oListModuleDispose).length,
                1: oListModuleDispose
            },
            oLMulPrice: {
                0: Object.keys(oListModulePrice).length,
                1: oListModulePrice
            },
            oLMBottomBanner: oListModuleBottom
        });
    })();


    /**
     * 家电
    */
    (function(){
        //var oJiadian = oListModule.querySelector('.jiadian');

        /* 数据 */
        // 左边的banner  img  图片wc
        var oListModuleBannerImgs = jiadianFn().leftBannerImgs;
        // ul列表img标签 图片 
        var oListModuleBannerLi = jiadianFn().olImgs;
        // ul列表最后一个li
        var oListModuleLastLi = jiadianFn().ollastGoods;      
        console.log(oListModuleLastLi);
        // ul列表h3标签 name
        var oListModuleName = jiadianFn().olNames;
        // ul列表span标签 手机配置
        var oListModuleDispose = jiadianFn().olDispose;      
        // ul列表DIV标签   price
        var oListModulePrice = jiadianFn().olPrice;
        // 下边banner img
        var oListModuleBottom = jiadianFn().bottomBannerImg;


        // 调用 构造函数           
        new ListModule({
            el: oJiadian,
            oLMbannerImgs: {
                0: Object.keys(oListModuleBannerImgs).length,
                1: oListModuleBannerImgs
            },
            oLMulImg: {
                0: Object.keys(oListModuleBannerLi).length,
                1: oListModuleBannerLi
            },
            oLMulName: {
                0: Object.keys(oListModuleName).length,
                1: oListModuleName
            },
            oLMulDispose: {
                0: Object.keys(oListModuleDispose).length,
                1: oListModuleDispose
            },
            oLMulPrice: {
                0: Object.keys(oListModulePrice).length,
                1: oListModulePrice
            },
            oLMLastLi: oListModuleLastLi,
            oLMBottomBanner: oListModuleBottom
        });
    })();



    /**
     * 智能
    */
    (function(){
        // 左边的banner  img  图片wc
        var oListModuleBannerImgs = zhinengFn().leftBannerImgs;
        // ul列表img标签 图片 
        var oListModuleBannerLi = zhinengFn().olImgs;
        // ul列表最后一个li
        var oListModuleLastLi = zhinengFn().ollastGoods;      
        // ul列表h3标签 name
        var oListModuleName = zhinengFn().olNames;
        // ul列表span标签 手机配置
        var oListModuleDispose = zhinengFn().olDispose;      
        // ul列表DIV标签   price
        var oListModulePrice = zhinengFn().olPrice;
        // 下边banner img
        var oListModuleBottom = zhinengFn().bottomBannerImg;

        // 调用 构造函数           
        new ListModule({
            el: oZhineng,
            oLMbannerImgs: {
                0: Object.keys(oListModuleBannerImgs).length,
                1: oListModuleBannerImgs
            },
            oLMulImg: {
                0: Object.keys(oListModuleBannerLi).length,
                1: oListModuleBannerLi
            },
            oLMulName: {
                0: Object.keys(oListModuleName).length,
                1: oListModuleName
            },
            oLMulDispose: {
                0: Object.keys(oListModuleDispose).length,
                1: oListModuleDispose
            },
            oLMulPrice: {
                0: Object.keys(oListModulePrice).length,
                1: oListModulePrice
            },
            oLMLastLi: oListModuleLastLi,
            oLMBottomBanner: oListModuleBottom
        });
    })();



    /**
     * 搭配
    */
    (function(){
    // 左边的banner  img  图片wc
    var oListModuleBannerImgs = dapeiFn().leftBannerImgs;
    // ul列表img标签 图片 
    var oListModuleBannerLi = dapeiFn().olImgs;
    // ul列表最后一个li
    var oListModuleLastLi = dapeiFn().ollastGoods;      
    // ul列表h3标签 name
    var oListModuleName = dapeiFn().olNames;
    // ul列表span标签 手机配置
    var oListModuleDispose = dapeiFn().olDispose;      
    // ul列表DIV标签   price
    var oListModulePrice = dapeiFn().olPrice;
    // 下边banner img
    var oListModuleBottom = dapeiFn().bottomBannerImg;


    // 调用 构造函数           
    new ListModule({
        el: oDapei,
        oLMbannerImgs: {
            0: Object.keys(oListModuleBannerImgs).length,
            1: oListModuleBannerImgs
        },
        oLMulImg: {
            0: Object.keys(oListModuleBannerLi).length,
            1: oListModuleBannerLi
        },
        oLMulName: {
            0: Object.keys(oListModuleName).length,
            1: oListModuleName
        },
        oLMulDispose: {
            0: Object.keys(oListModuleDispose).length,
            1: oListModuleDispose
        },
        oLMulPrice: {
            0: Object.keys(oListModulePrice).length,
            1: oListModulePrice
        },
        oLMLastLi: oListModuleLastLi,
        oLMBottomBanner: oListModuleBottom
    });
    })();



    /**
     * 配件
    */
    (function(){
    // 左边的banner  img  图片wc
    var oListModuleBannerImgs = peijianFn().leftBannerImgs;
    // ul列表img标签 图片 
    var oListModuleBannerLi = peijianFn().olImgs;
    // ul列表最后一个li
    var oListModuleLastLi = peijianFn().ollastGoods;      
    // ul列表h3标签 name
    var oListModuleName = peijianFn().olNames;
    // ul列表span标签 手机配置
    var oListModuleDispose = peijianFn().olDispose;      
    // ul列表DIV标签   price
    var oListModulePrice = peijianFn().olPrice;
    // 下边banner img
    var oListModuleBottom = peijianFn().bottomBannerImg;

    // 调用 构造函数           
    new ListModule({
        el: oPeijian,
        oLMbannerImgs: {
            0: Object.keys(oListModuleBannerImgs).length,
            1: oListModuleBannerImgs
        },
        oLMulImg: {
            0: Object.keys(oListModuleBannerLi).length,
            1: oListModuleBannerLi
        },
        oLMulName: {
            0: Object.keys(oListModuleName).length,
            1: oListModuleName
        },
        oLMulDispose: {
            0: Object.keys(oListModuleDispose).length,
            1: oListModuleDispose
        },
        oLMulPrice: {
            0: Object.keys(oListModulePrice).length,
            1: oListModulePrice
        },
        oLMLastLi: oListModuleLastLi,
        oLMBottomBanner: oListModuleBottom
    });
    })();



    /**
     * 周边
    */
   (function(){
    // 左边的banner  img  图片wc
    var oListModuleBannerImgs = zhoubianFn().leftBannerImgs;
    // ul列表img标签 图片 
    var oListModuleBannerLi = zhoubianFn().olImgs;
    // ul列表最后一个li
    var oListModuleLastLi = zhoubianFn().ollastGoods;      
    // ul列表h3标签 name
    var oListModuleName = zhoubianFn().olNames;
    // ul列表span标签 手机配置
    var oListModuleDispose = zhoubianFn().olDispose;      
    // ul列表DIV标签   price
    var oListModulePrice = zhoubianFn().olPrice;
    // 下边banner img
    var oListModuleBottom = zhoubianFn().bottomBannerImg;

    // 调用 构造函数           
    new ListModule({
        el: oZhoubian,
        oLMbannerImgs: {
            0: Object.keys(oListModuleBannerImgs).length,
            1: oListModuleBannerImgs
        },
        oLMulImg: {
            0: Object.keys(oListModuleBannerLi).length,
            1: oListModuleBannerLi
        },
        oLMulName: {
            0: Object.keys(oListModuleName).length,
            1: oListModuleName
        },
        oLMulDispose: {
            0: Object.keys(oListModuleDispose).length,
            1: oListModuleDispose
        },
        oLMulPrice: {
            0: Object.keys(oListModulePrice).length,
            1: oListModulePrice
        },
        oLMLastLi: oListModuleLastLi,
        oLMBottomBanner: oListModuleBottom
    });
    })();



    /**
     * 视频
    */
    (function(){
        var oVideo = document.querySelector('.video'),
        oVideoCon = oVideo.querySelector('.video-con');

        // 数据
        var date = {
            imgs: shipinFn().imgs,
            title: shipinFn().title,
            span: shipinFn().span,
        };
        var oDiFragment = document.createDocumentFragment();
        for(var i=0, len=date.imgs.length; i<len; i++){
            var oLi = document.createElement('li');
            oLi.innerHTML = `
                            <a href="javascript:;">
                                <div class="video-img">
                                    <img src="${date.imgs[i]}" />
                                    <div class="video-btn"></div>
                                </div>
                                <h3>${date.title[i]}</h3>
                                <span>${date.span[i]}</span>
                            </a>        
                            `;
            // 添加点击事件
            (function(i){
                oLi.addEventListener('click', function(){
                    videoFn(i);
                });
            })(i);
            
            oDiFragment.appendChild(oLi);
        }
        oVideoCon.innerHTML = '';
        // 将数据添加至html
        oVideoCon.appendChild(oDiFragment);


        // 播放视频函数
        function videoFn(i){
            console.log(i)
        }

    })()
    
})()